<template>
    <div class="boxs">

        <div style='margin-bottom: 20px;'>
            <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                @finish="onFinish">
                <a-row :gutter="24">
                    <template v-for="i, index in columns" :key="i">
                        <a-col v-show="expand || index < 6" :span="4">
                            <a-form-item name="gender" label="性别" v-if="i.key == 'gender'">
                                <a-radio-group v-model:value="formState['gender']">
                                    <a-radio-button value=" ">全部</a-radio-button>
                                    <a-radio-button value="1">男</a-radio-button>
                                    <a-radio-button value="0">女</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item name="examine" label="选择审核类型" v-else-if="i.key == 'examine'" style="width: 26vw;">
                                <a-select v-model:value="formState['examine']" mode="tags" placeholder="请选择类型">
                                    <a-select-option value="A">形象照审核</a-select-option>
                                    <a-select-option value="B">健康证审核</a-select-option>
                                    <a-select-option value="C">生活照审核</a-select-option>
                                    <a-select-option value="D">个人简介审核</a-select-option>
                                    <a-select-option value="E">身份证审核</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item :name="`${i.key}`" :label="`${i.title}`" v-else>
                                <a-input v-model:value="formState[`${i.key}`]" :placeholder="'请输入'"></a-input>
                            </a-form-item>
                        </a-col>
                    </template>
                </a-row>
                <a-row>
                    <a-col :span="24" style="text-align: right">
                        <a-button type="primary" html-type="submit">查询</a-button>
                        <a-button style="margin: 0 8px" @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>
                        <a style="font-size: 12px" @click="expand = !expand" v-show="columns.length - 1 > 6">
                            <template v-if="expand">
                                <UpOutlined />
                            </template>
                            <template v-else>
                                <DownOutlined />
                            </template>
                            <span v-show="columns.length - 1 > 6"> 更多</span>
                        </a>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table :columns="columns" :data-source="data" 
            :pagination="{ current, pageSize, total: totalCount }" @change="pageClick">
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'gender'">
                    <span :style="{ color: `${record.gender == 1 ? 'blue' : 'red'}` }">{{ record.gender == 1 ? '男' : '女'
                    }}</span>
                </template>
                <template v-if="column.key === 'examine'">

                    <a-tag color="success" v-if="record.examine[0] == 0" @click="changeModel(record.uid, 'A')">形象照审核</a-tag>
                    <a-tag color="processing" v-if="record.examine[1] == 0" @click="changeModel(record.uid, 'B')">健康证审核</a-tag>
                    <a-tag color="error" v-if="record.examine[2] == 0" @click="changeModel(record.uid, 'C')">生活照审核</a-tag>
                    <a-tag color="warning" v-if="record.examine[3] == 0" @click="changeModel(record.uid, 'D')">个人简介审核</a-tag>
                    <a-tag color="pink" v-if="record.examine[4] == 0" @click="changeModel(record.uid, 'E')">身份证审核</a-tag>

                </template>
            </template>
        </a-table>
        <a-modal v-model:visible="visible" :title="title" :width="850" @cancel="handleCancel"
            :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="handleOk">确定</a-button>
            </template>
            <div class="modal-content">
                <div class="left-section">
                    <h2 class="section-title">基本信息</h2>
                    <div class="content" v-if="biao == 'A'">
                        <div class="info">
                            <p>
                                <span class="label">名称：</span>
                                <span class="value">{{ resData.name }}</span>
                            </p>
                            <p>
                                <span class="label">电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p>
                                <span class="label">性别：</span>
                                <span class="value">{{ resData.gender === 'male' ? '男' : '女' }}</span>
                            </p>
                            <p>
                                <span class="label">提交日期：</span>
                                <span class="value">{{ resData.submit_date }}</span>
                            </p>
                            <p>
                                <span class="label">审核结果：</span>
                                <a-radio-group v-model:value="redioData" name="radioGroup">
                                    <a-radio value="1">通过</a-radio>
                                    <a-radio value="2">不通过</a-radio>
                                </a-radio-group>
                            </p>
                            <p v-show="redioData == 2" class="textP">
                                <span class="label">原因：</span>
                                <a-textarea v-model:value="textData" placeholder="请输入原因" allow-clear :rows="6" />
                            </p>
                            <p  class="textP">
                                <span class="label">备注：</span>
                                <a-textarea v-model:value="note" placeholder="请输入备注" allow-clear :rows="6"   />
                            </p>
                        </div>
                        <a-image :src="share.http + `/${resData.dir}/${resData.image}`" alt="待审核照片" :width="300" ></a-image>
                    </div>
                    <div class="content" v-else-if="biao == 'B'">
                        <div class="info">
                            <p>
                                <span class="label">名称：</span>
                                <span class="value">{{ resData.name }}</span>
                            </p>
                            <p>
                                <span class="label">电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p>
                                <span class="label">性别：</span>
                                <span class="value">{{ resData.gender === 'male' ? '男' : '女' }}</span>
                            </p>
                            <p>
                                <span class="label">发证日期：</span>
                                <span class="value">{{ resData.health_date }}</span>
                            </p>
                            <p>
                                <span class="label">健康证号：</span>
                                <span class="value">{{ resData.health_number }}</span>
                            </p>
                            <p>
                                <span class="label">审核结果：</span>
                                <a-radio-group v-model:value="redioData" name="radioGroup">
                                    <a-radio value="1">通过</a-radio>
                                    <a-radio value="2">不通过</a-radio>
                                </a-radio-group>
                            </p>
                            <p v-show="redioData == 2" class="textP">
                                <span class="label">原因：</span>
                                <a-textarea v-model:value="textData" placeholder="请输入原因" allow-clear :rows="6" />
                            </p>
                            <p  class="textP">
                                <span class="label">备注：</span>
                                <a-textarea v-model:value="note" placeholder="请输入备注" allow-clear :rows="6"   />
                            </p>
                        </div>
                        <a-image :src="share.http + `/${resData.health_dir}/${resData.uid}/${resData.health}`" alt="待审核照片"
                            :width="300" :height="195"></a-image>
                    </div>

                    <div class="content" v-else-if="biao =='C'">
                        <div class="info" >
                            <p>
                                <span class="label">名称：</span>
                                <span class="value">{{ resData.name }}</span>
                            </p>
                            <p>
                                <span class="label">电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p>
                                <span class="label">性别：</span>
                                <span class="value">{{ resData.gender === 'male' ? '男' : '女' }}</span>
                            </p>
                            <p>
                                <span class="label">审核结果：</span>
                                <a-radio-group v-model:value="redioData" name="radioGroup">
                                    <a-radio value="1">通过</a-radio>
                                    <a-radio value="2">不通过</a-radio>
                                </a-radio-group>
                            </p>
                            <p v-show="redioData==2" class="textP">
                                <span class="label">原因：</span>
                                <a-textarea v-model:value="textData" placeholder="请输入原因" allow-clear :rows="6"   />
                            </p>
                            <p  class="textP">
                                <span class="label">备注：</span>
                                <a-textarea v-model:value="note" placeholder="请输入备注" allow-clear :rows="6"   />
                            </p>
                        </div>

                        <a-image v-for="item in resData.lifephoto?.split(',')" :key="item" :src="share.http + `/${resData.dir}/${resData.uid}/${item}`" alt="待审核照片" :width="130" :height="195"
                            ></a-image>
                    </div>
                    <div class="content" v-else-if="biao =='D'">
                        <div class="info" >
                            <p>
                                <span class="label">名称：</span>
                                <span class="value">{{ resData.name }}</span>
                            </p>
                            <p>
                                <span class="label">电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p>
                                <span class="label">性别：</span>
                                <span class="value">{{ resData.gender === 'male' ? '男' : '女' }}</span>
                            </p>
                            <p> 
                                <span class="label">简介内容：</span>
                                <span class="value" style="color:#FFA07A">{{ resData.blurb }}</span>
                            </p>
                            <p>
                                <span class="label">发布日期：</span>
                                <span class="value">{{ resData.release_date }}</span>
                            </p>
                            <p>
                                <span class="label">审核结果：</span>
                                <a-radio-group v-model:value="redioData" name="radioGroup">
                                    <a-radio value="1">通过</a-radio>
                                    <a-radio value="2">不通过</a-radio>
                                </a-radio-group>
                            </p>

                            <p v-show="redioData==2" class="textP">
                                <span class="label">原因：</span>
                                <a-textarea v-model:value="textData" placeholder="请输入原因" allow-clear :rows="6"   />
                            </p>
                            <p  class="textP">
                                <span class="label">备注：</span>
                                <a-textarea v-model:value="note" placeholder="请输入备注" allow-clear :rows="6"   />
                            </p>
                        </div>

                        
                    </div>
                    <div class="content" v-else-if="biao =='E'">
                        <div class="info" >
                            <p>
                                <span class="label">名称：</span>
                                <span class="value">{{ resData.name }}</span>
                            </p>
                            <p>
                                <span class="label">电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p>
                                <span class="label">性别：</span>
                                <span class="value">{{ resData.gender === 'male' ? '男' : '女' }}</span>
                            </p>
                            <p>
                                <span class="label">电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p>
                                <span class="label">身份证号码：</span>
                                <span class="value">{{ resData.card_number }}</span>
                            </p>
                            <p>
                                <span class="label">身份证有效期：</span>
                                <span class="value">{{ resData.end_date}}</span>
                            </p>
                            <p>
                                <span class="label">审核结果：</span>
                                <a-radio-group v-model:value="redioData" name="radioGroup">
                                    <a-radio value="1">通过</a-radio>
                                    <a-radio value="2">不通过</a-radio>
                                </a-radio-group>
                            </p>
                            <p v-show="redioData==2" class="textP">
                                <span class="label">原因：</span>
                                <a-textarea v-model:value="textData" placeholder="请输入原因" allow-clear :rows="6"   />
                            </p>
                            <p  class="textP">
                                <span class="label">备注：</span>
                                <a-textarea v-model:value="note" placeholder="请输入备注" allow-clear :rows="6"   />
                            </p>
                        </div>

                        <a-image v-for="item in [].concat(resData.card,resData.card_side)" :key="item" :src="share.http + `/${resData.card_dir}/${resData.uid}/${item}`" alt="待审核照片" :width="130" :height="195"
                            ></a-image>
                    </div>
                    <div class="content" v-else-if="biao =='F'">
                        <div class="info" >
                            <p>
                                <span class="label">名称：</span>
                                <span class="value">{{ resData.name }}</span>
                            </p>
                            <p>
                                <span class="label">电话：</span>
                                <span class="value">{{ resData.phone }}</span>
                            </p>
                            <p> 
                                <span class="label">提现金额：</span>
                                <span class="value" style="color:red">{{ resData.withdrawal_amount }}</span>
                            </p>
                            <p>
                                <span class="label">提现日期：</span>
                                <span class="value">{{ resData.date_time }}</span>
                            </p>
                            <p>
                                <span class="label">审核结果：</span>
                                <a-radio-group v-model:value="redioData" name="radioGroup">
                                    <a-radio value="1">通过</a-radio>
                                    <a-radio value="2">不通过</a-radio>
                                </a-radio-group>
                            </p>

                            <p v-show="redioData==2" class="textP">
                                <span class="label">原因：</span>
                                <a-textarea v-model:value="textData" placeholder="请输入原因" allow-clear :rows="6"   />
                            </p>
                            <p  class="textP">
                                <span class="label">备注：</span>
                                <a-textarea v-model:value="note" placeholder="请输入备注" allow-clear :rows="6"   />
                            </p>
                        </div>
                        </div>
                </div>



            </div>

        </a-modal>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { reviewAPI, reviewDataAPI } from '../../../api/home';
import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import {debounce} from 'lodash'

const textData = ref('')  //不通过的文本域
const note = ref('');  //备注
const redioData = ref(0)        //选择通过或者不通过
const store = useUserData()     //pinia用户数据
const router = useRouter();     

const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页

const visible = ref(false);    //弹窗
const biao = ref('A');          //当前表 
const title = ref('技师审核');  //弹窗标题
const resData = ref({});        //弹窗数据

const handleOk = async () => {  //当点击确定时
    if(share.containsSpecialCharacters(textData.value) || share.containsSpecialCharacters(note.value)){
        message.error("含有非法字符！！！");
        return;
    }
    if(redioData.value){              //当用户选择了审核是否通过
        let str = `technician|${resData.value.uid}|${biao.value}${redioData.value}${redioData.value == "1" ? '' : textData.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}|${note.value}`;
        let res = await reviewDataAPI(str);
        console.log(res);
        if (res.code == 400) {
            message.error(res.message);
        } else if (res.code == 201) {
            message.success("审核成功")
        }
        visible.value = false;
        redioData.value = 0;
        textData.value = '';
        pageClick();
    }else{
        message.error({
            content: () => '没有选择审核是否通过',
            style: {
                marginTop: '20vh',
                color:'red'
            },
        })
    }
}

const handleCancel = () => { //当取消弹窗
    redioData.value = 0;
    textData.value = '';
    note.value = '';

}
const changeModel = async (uid, table) => {  //当打开弹窗
    let res = await reviewDataAPI(`technician|${uid}|${table}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    console.log(res);
    if (res.code == 400) {
        message.error(res.message);
        return
    }
    visible.value = true;
    biao.value = table;
    resData.value = res.data[0];
    
    
    switch (table) {
        case "A":
            title.value = "形象照审核";
            break;
        case "B":
            title.value = "健康证审核";
            break;
        case "C":
            title.value = "生活照审核";
            break;
        case "D":
            title.value = "个人简介审核";
            break;
        case "E":
            title.value = "身份证审核";
            break
        case "F":
            title.value = "提现审核";
            break
        default:
            break;
    }

}


const columns = [{   //表格头部
    title: '技师名称',
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
}, {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
    fixed: 'left',
    width: 100
}, {
    title: '电话号码',
    dataIndex: 'phone',
    key: 'phone',
}, {
    title: '审核内容',
    dataIndex: 'examine',
    key: 'examine',
    width: 700
}];
const data = ref([]);  //表格数据内容

//表单
const expand = ref(false);  //查询部分是否展示更多
const formRef = ref();
const formState = reactive({
    name: '',
    gender: ' ',
    examine: [],
    phone: '',
});
const onFinish = values => {        //当顶级重置
    console.log(
        formState
    );
    pageClick()
};


const debouncePageClick = debounce(async(item)=>{       //防抖
    item ? current.value = item.current : current.value = 1;
    let { name, gender, examine, phone } = formState;
    examine = examine.join('');
    console.log(
        examine
    );
    let res = await reviewAPI(`technician|${name}|${phone}|${gender}|${examine}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    }else if(res.code !=200){ 
        message.error(res.message);
        return
    }
    console.log(res);
    if (res.data.data[0]?.name && res.data.data[0]?.phone && res.data.data[0]?.examine) {   //后端这个接口没有数据返回的是 [{name:null,gender:null,examine:null,phone:null}]

        data.value = res.data.data;
    } else {
        data.value = [];
    }
},300)

const pageClick = async (item) => {  //页面发生变化时 或者各种被调用
    debouncePageClick(item);

}



onMounted(async () => {
    const { name, gender, examine, phone } = formState;
    
    let res = await reviewAPI(`technician|${name}|${phone}|${gender}|${examine}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    console.log(res);
    if (!res) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    }
    data.value = res.data.data;
    
})

</script>


<style scoped src="../../css/home/tech.scss" />
